<template>
  <div id="root">
    <NavBar>{{detailObj.name}}</NavBar>
    
    <Swiper :list="picArr" auto loop height="240px"></Swiper>
    
    <div id="both">
      <div :class="{'selected':change}" @touchstart="change=true">景点门票</div>
      <div :class="{'selected':!change}" @touchstart="change=false">景区介绍</div>
    </div>

    <div id="back-color">

      <div class="replace1" v-show="change">
        <div class="hang">
          <span class="fa fa-money"></span>
          <span>单门票</span>
        </div>
        <div class="replace1-item" v-for="p in detailObj.price">
          <div class="name">{{p.ptitle}}</div>
          <div class="tuikuan"><span class="fa fa-check-circle"></span><span>支持退</span></div>
          <span>购票须知>></span>
          <div class="book">
            <span>￥{{p.pprice}}</span>
            <router-link :to="'/my/viewlist/detail/order/'+p.ptitle+'/'+p.pprice">
              <img src="/static/img/logo/yd.png">
            </router-link>
          </div>
        </div>
      </div>

      <div class="replace2" v-show="!change">
        <div class="weather">
          <div class="weather-item">
            <p>今天</p>
            <div>
              <img src="/static/img/weather/00.png">
              <span>7/17</span>
            </div>
            <p>多云</p>
          </div>
          <div class="weather-item">
            <p>今天</p>
            <div>
              <img src="/static/img/weather/01.png">
              <span>7/17</span>
            </div>
            <p>多云</p>
          </div>
          <div class="weather-item">
            <p>今天</p>
            <div>
              <img src="/static/img/weather/03.png">
              <span>7/17</span>
            </div>
            <p>多云</p>
          </div>
        </div>
        <div class="address">
          <span class="fa fa-map-marker"></span>
          <span>{{detailObj.city}}</span>
        </div>
        <div class="address">
          <span class="fa fa-sticky-note-o"></span>
          <span>预定须知</span>
        </div>
        <div class="time">
          <div>
            <span class="fa fa-clock-o clock"></span>
            <span>开放时间</span>
          </div>
          <div class="time-item">
            上午场：09:30-14:00
          </div>
        </div>
        <div class="why">
          <div class="top">
            <span class="fa fa-question-circle-o"></span>
            <span>为什么要去</span>
            <span>{{detailObj.name}}</span>
          </div>
          <div class="replace2-item1" v-for="(e,i) in introObj.reason">
            <div>
              <span>理由{{i+1}}</span>
              <span>{{e.title}}</span>
            </div>
            <p>{{e.content}}</p>
          </div>
        </div>
        <div class="why">
          <div class="top">
            <span class="fa fa-sign-out"></span>
            <span>快速了解</span>
            <span>{{detailObj.name}}</span>
          </div>
          <div class="replace2-item1" v-for="e in introObj.know">
            <img :src="'/img/intro/'+e.img">
            <p class="content">{{e.jieshao}}</p>
          </div>
        </div>
      </div>

      <div id="last">
        <div></div>
        <span>到底啦</span>
        <div></div>
      </div>
    </div>

  </div>
</template>

<script>
import {Swiper} from 'vux';
import NavBar from '../components/NavBar.vue';

export default {
  data:function(){
    return {
      detailObj:{},
      picArr:[],
      change:true,
      introObj:{}
    }
  },
  components:{
    NavBar,
    Swiper
  },
  computed:{
    
  },
  methods:{
    reload:function(){
      // 根据传过来的景点的_id去查这个景点的详细信息，用于渲染景点详情页
      this.http.post("/api/detail",{_id:this.$route.params.value})
      .then(res=>{
        this.detailObj = res.data.msg;
        for(var i = 0;i<res.data.msg.pic.length;i++){
            var item = {};
            item.img = "/img/loop/"+res.data.msg.pic[i];
            this.picArr.push(item);
        };
        // 查询intros表，查当前景点的详细介绍
        this.http.post("/api/intro",{name:this.detailObj.name})
        .then(res=>{
          this.introObj = res.data.msg;
        });
      });
    },
  },
  mounted:function(){
    this.reload();
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #root{
    width:100vw;
  }
  #both{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 20px;
    border-bottom:1px solid #dedede;
    font-size:14px;
    background-color:white;
  }
  #both div{
    color: #666;
    line-height: 40px;
    height:40px;
    flex-grow:1;
    text-align:center;
  }
  .selected{
    color: #ff6f6d !important;
    border-bottom: 2px solid #ff6f6d;
  }
  #back-color{
    background-color:#F8F8F8;
    height:calc(100vh - 324px);
    overflow-y:scroll;
  }
  .hang{
    margin-top:12px;
    height: 40px;
    padding: 0 16px;
    background: #fff;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
  }
  .hang span:nth-of-type(1){
    color:#FF6F6D;
  }
  .hang span:nth-of-type(2){
    font-size:12px;
    color:#666;
    line-height:40px;
    margin-left:4px;
  }
  .name{
    padding-left:12px;
    font-size: 14px;
    color: #666;
    line-height: 20px;
  }
  .tuikuan{
    padding-left:13px;
  }
  .tuikuan span:nth-of-type(1){
    color:#5DC300;
    font-size:14px;
  }
  .tuikuan span:nth-of-type(2){
    font-size: 12px;
    color: #9b9b9b;
    margin-left:5px;
  }
  .replace1-item>span{
    font-size: 10px;
    color: #4e85c5;
    padding-left:13px;
  }
  .book{
    text-align:right;
    height:44px;
    line-height:44px;
    padding-right:8px;
  }
  .book span{
    font-size: 16px;
    color: #ff6f6d;
  }
  .book img{
    vertical-align:middle;
  }
  .replace1-item{
    border-bottom:1px solid #dedede;
    padding:8px 0 12px 0;
  }
  #last{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:20px 0;
  }
  #last div{
    height:1px;
    flex-grow:1;
    background-color:#AFAFAF;
  }
  #last span{
    margin:0 6px;
    font-size:12px;
    color:#AAAAAA;
  }
  .weather{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:12px;
    background-color:white;
    padding:8px 0;
    border:solid 1px #dedede;
  }
  .weather-item{
    border-right:1px solid #dedede;
    flex-grow:1;
    height:50px;
  }
  .weather-item p{
    margin:0;
    color: #666;
    text-align: center;
    font-size: 10px;
    line-height: 12px;
    height:12px;
  }
  .weather-item div{
    text-align: center;
    font-size: 10px;
    color: #9b9b9b;
    line-height: 20px;
    height:20px;
  }
  .weather-item div>img{
    width:19px;
    height:17px;
  }
  .address{
    background-color:white;
    border-bottom:solid 1px #dedede;
    padding:5px 10px;
  }
  .address span:nth-of-type(1){
    color:#FF6F6D;
    font-size: 13px;
  }
  .address span:nth-of-type(2){
    font-size: 12px;
    color: #666;
    margin-left:8px;
  }
  .time{
    background-color:white;
    padding:0 10px;
    border-top:1px solid #dedede;
    border-bottom:1px solid #dedede;
    margin-top:12px;
  }
  .time div:nth-of-type(1){
    font-size: 12px;
    color: #9b9b9b;
    padding:7px 0;
  }
  .clock{
    color:#FF6F6D;
    font-size:15px;
    margin-right:8px;
  }
  .time-item{
    font-size: 12px;
    color: #666;
    border-top: 1px solid #dedede;
    padding:8px 0;
  }
  .why{
    background-color:white;
    padding:0 10px;
    border-top:1px solid #dedede;
    border-bottom:1px solid #dedede;
    margin-top:12px;
    margin-bottom:12px;
  }
  .top{
    font-size: 13px;
    color: #9b9b9b;
    padding:4px 0;
    border-bottom:solid 1px #dedede;
  }
  .top span:nth-of-type(1){
    font-size:15px;
  }
  .top span:nth-of-type(2){
    color:#5abc00;
    margin:0 8px;
  }
  .replace2-item1{
    margin:6px;
  }
  .replace2-item1 p{
    padding-top:4px;
    margin:0;
    font-size:12px;
    color:#9b9b9b;
  }
  .replace2-item1 div span:nth-of-type(1){
    color: #ff911b;
    font-size:13px;
  }
  .replace2-item1 div span:nth-of-type(2){
    font-size:13px;
    color:#666;
  }
  .replace2-item1 img{
    width:100%;
  }
  .content{
    font-size:14px !important;
    color:#666 !important;
  }
</style>
